<template>
  <TopHeaderNav></TopHeaderNav>
  <div class="content-wrapper">
    <div class="page-content">
      <el-row class="p-20" :gutter="20">
        <el-col :span="5" :offset="2">
          <el-card>
            <template #header>我的卡片 <i class="em em-zany_face"></i></template>
            <div class="block-tips block-red my-10" style="font-size: 15px;">
              <span style="display: inline-block;width: 80px;text-align: right;">称呼：</span><span style="font-weight: bold;">ZHAOLT</span><br>
              <span style="display: inline-block;width: 80px;text-align: right;">头像：</span>
              <el-tooltip effect="dark" content="https://blog.realzhaolt.cn/static/img/avatar.45a228c8.png" placement="top-start">
                <el-button size="mini" type="primary" plain style="padding:3px 7px;min-height: 24px;" @click="copy('https://blog.realzhaolt.cn/static/img/avatar.45a228c8.png')">
                  <svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-365b8594="">
                    <path fill="currentColor" d="M128 320v576h576V320H128zm-32-64h640a32 32 0 0132 32v640a32 32 0 01-32 32H96a32 32 0 01-32-32V288a32 32 0 0132-32zM960 96v704a32 32 0 01-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0132-32h576a32 32 0 0132 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z"></path>
                  </svg>
                  点我复制
                </el-button>
              </el-tooltip><br>
              <span style="display: inline-block;width: 80px;text-align: right;">网站地址：</span>http://blog.realzhaolt.cn/<br>
              <span style="display: inline-block;width: 80px;text-align: right;">简介：</span>有问题就会有答案
            </div>
          </el-card>
          <el-card class="mt-20">
            <template #header>友链申请
              <el-tooltip effect="dark" content="若之前未生成过您的用户，则此次提交会根据填写的友链信息为您生成一个新的用户" placement="top-start">
                <i class="el-icon-info color-warning"></i>
              </el-tooltip>
            </template>
            <p>友链申请格式如下：
            </p>
            <div class="block-tips block-blue my-10">
              称呼：张三<br>
              头像：可访问的网络图片地址<br>
              网站地址：输入你的网站地址<br>
              简介：这是我的个人简介
            </div>
            <p style="height: 30px;line-height: 30px;">填写下方表单马上申请友链~ <i class="em em-kissing_heart" style="margin-bottom: 3px;width: 18px;"></i></p>
            <form class="friends-form" id="chainApplyForm" v-loading="submitting">
              <p>称呼<i class="must"></i>：
              </p>
              <el-input v-model="applyChain.friendName" name="friendName" placeholder="想让大家怎么称呼你呢" suffix-icon="el-icon-user" />
              <p>头像地址：
                <el-tooltip effect="dark" content="填写一个可访问的完整图片URL（例如：http://img.realzhaolt.cn:18080/web-res/gallery/avatar/99b3e985e48d46d696f36a27351f0a25/BltobjQYLV.jpg）请尽量设置一个比例与大小合适的图片，以免在显示时出现速度过慢等其他问题" placement="top-start">
                  <i class="el-icon-info color-warning"></i>
                </el-tooltip>
              </p>
              <el-input v-model="applyChain.friendAvatar" name="friendAvatar" placeholder="输入一个可访问的图片地址" suffix-icon="el-icon-picture-outline-round" />
              <p>网站地址<i class="must"></i>：</p>
              <el-input v-model="applyChain.friendSite" name="friendSite" placeholder="填写您的可访问网站的完整地址" suffix-icon="el-icon-attract" />
              <p>个人简介：
                <el-tooltip effect="dark" content="渲染友链卡片时会将你的简介直接以html填入，你也可以使用css定义自己的个性简介哦~" placement="top-start">
                  <i class="el-icon-info color-warning"></i>
                </el-tooltip>
              </p>
              <el-input v-model="applyChain.friendDescription" name="friendDescription" placeholder="介绍一下你自己吧" show-word-limit type="textarea" resize="none" maxlength="500" rows="5" />
              <el-button type="success" :loading="submitting" @click="submitForm">写完啦</el-button>
            </form>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-row :gutter="20" v-loading="loading">
            <template v-if="chainList.length>0">
              <el-col :span="6" v-for="chain in chainList" :key="chain">
                <a :href="chain.friendSite" target="_blank">
                  <el-card class="friend-card">
                    <div class="user-face">
                      <div class="avatar">
                        <img v-if="chain.friendAvatar" :src="chain.friendAvatar">
                      </div>
                      <div class="friend-name">{{chain.friendName}}</div>
                    </div>
                    <el-divider class="mt-20 mb-10"></el-divider>
                    <div class="friend-text" v-if="chain.friendDescription" v-html="chain.friendDescription"></div>
                    <div class="friend-text" v-else>这个人很懒，他什么也没留下~</div>
                  </el-card>
                </a>
              </el-col>
            </template>
            <el-empty v-else description="暂时还没有哦~" style="margin: auto;">
            </el-empty>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>

</template>
<script>
  import TopHeaderNav from '@/components/TopHeaderNav'
  import '@/assets/css/friends.scss'
  import { ElMessage } from 'element-plus'
  export default {
    components: {
      TopHeaderNav
    },
    data() {
      this.$axios.get("/api/user-service/friendChain/list").then((chainList) => {
        this.chainList = chainList;
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      }).catch(() => {})
      return {
        chainList: {},
        loading: true,
        submitting: false,
        applyChain: {}
      }
    },
    methods: {
      copy(content) {
        let transfer = document.createElement('input');
        document.body.appendChild(transfer);
        transfer.value = content; // 这里表示想要复制的内容
        transfer.select();
        if (document.execCommand('copy')) {
          document.execCommand('copy');
        }
        ElMessage.success('复制成功');
        document.body.removeChild(transfer);
      },
      submitForm() {
        this.submitting = true;
        this.$axios.post("/api/user-service/friendChain/apply", $("#chainApplyForm").serialize(), 'form').then((applyResult) => {
          setTimeout(() => {
            this.applyChain = {};
            this.loading = false;
          }, 1000);
        }).catch(() => {})
        setTimeout(() => {
          this.submitting = false
        }, 2000);
      }
    }
  }
</script>